<template>
  <div class="map-box">
    <div id="zcMap" ref="zcMapRef"></div>
    <div id="cqMap" ref="cqMapRef"></div>
    <div class="liang-jiang">
      <div class="area-item">两江新区</div>
    </div>
    <div class="gao-xin">
      <div class="area-item">高新区</div>
    </div>
    <div class="wan-sheng">
      <div class="area-item">万盛经开区</div>
    </div>
    <div class="info-box">
      <div class="row-1">万州区</div>
      <div class="row-2">
        <div class="common-item">
          <span>3859</span>
          <span>"山城哨"哨点</span>
        </div>
        <div class="common-item">
          <span>3859</span>
          <span>线上网格</span>
        </div>
      </div>
      <div class="row-3">
        <div class="common-item">
          <span>1363</span>
          <span>网军队伍</span>
        </div>
        <div class="common-item">
          <span>21</span>
          <span>属地重点账号</span>
        </div>
        <div class="common-item">
          <span>3</span>
          <span>行政执法</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import * as chongqingMapJSON from '@/assets/map/cq.json'
import * as mainCityMapJSON from '@/assets/map/zc.json'
import { nextTick, onMounted, reactive, ref, shallowRef } from 'vue'

const scatterSymbol =
  'image://'
const zcMapRef = ref()
const cqMapRef = ref()

const state = reactive({
  dataList: [{ name: '万州', value: 100 }]
})

// 主城code
const mainCityAdcode = new Set(mainCityMapJSON.features.map((item) => item.properties.name))
// 重庆地图实例
const cqInstance = shallowRef()
// 主城地图实例
const zcInstance = shallowRef()

const getMapGeo = (level = 0, name = '重庆') => {
  const center = ['46%', '46.8%', '47.6%', '48.4%', '49.2%', '50%', '50.8%']
  const zlevel = [1, -1, -2, -3, -4, -5, -6]
  return {
    map: name,
    zoom: 1,
    zlevel: zlevel[level],
    layoutCenter: ['46%', center[level]],
    layoutSize: '90%',
    aspectScale: 1,
    show: true,
    roam: false,
    silent: true,
    label: {
      show: false
    },
    itemStyle: {
      borderWidth: 2,
      borderColor: '#259BD4',
      shadowColor: 'rgba(63, 218, 255, 0.2)',
      shadowBlur: 10,
      areaColor: '#1A6BB1'
    }
  }
}

const getMapOption = (name: string) => {
  const options = {
    geo: new Array(7).fill(0).map((item: number, index: number) => getMapGeo(index, name)),
    series: [
      {
        zoom: 1,
        aspectScale: 1, //设置地图的长宽比
        type: 'map',
        map: name,
        zlevel: 2,
        layoutCenter: ['46%', '46%'],
        layoutSize: '90%',
        itemStyle: {
          borderWidth: 2,
          borderColor: '#259BD4',
          shadowColor: 'rgba(63, 218, 255, 0.2)',
          shadowBlur: 10,
          areaColor: '#1A6BB1'
        },
        label: {
          show: true,
          color: '#fff',
          // 主城名隐藏，做独立区块显示
          formatter: (val: any) => {
            if (name === '重庆' && mainCityAdcode.has(val.name)) return ''
            return val.name
          }
        },
        emphasis: {
          disabled: false,
          label: {
            show: true,
            color: '#fff'
          },
          itemStyle: {
            areaColor: 'rgba(252,197,56,0.8)'
          }
        },
        select: {
          disabled: true, //todo 暂时不让地图可交互
          label: {
            show: true,
            color: '#fff'
          },
          itemStyle: {
            areaColor: 'rgba(252,197,56,0.8)'
          }
        },
        data: state.dataList
      }
    ]
  }
  return options
}

const point = ref<any>([{ name: '万州', value: [108.406819, 30.704054] }])

function setCoords(coords: any) {
  const infoBoxLat = 29.884753 //展示信息盒子的纬度
  const lat = coords[1]
  if (lat < infoBoxLat) {
    return [
      {
        coords: [coords, [107.9, 28.4003]]
      },
      {
        coords: [
          [107.9, 28.4003],
          [108.491, 28.408]
        ]
      }
    ]
  } else {
    // 地图块的维度大于infobox
    return [
      {
        coords: [coords, [110.4, 30.99999]]
      },
      {
        coords: [
          [110.4, 30.99999],
          [110.4, 29.97899]
        ]
      }
    ]
  }
}
const prevName = ref('万州')
function cqMapAddScatter(name?: string) {
  const cqOptions = getMapOption('重庆')
  name && getCenterInCqMap(name)
  // 对重庆地图添加打点|连线功能
  cqOptions.series.push(
    {
      type: 'scatter',
      coordinateSystem: 'geo',
      geoIndex: 2,
      itemHeight: 60,
      zlevel: 3,
      symbol: scatterSymbol,
      symbolSize: [35, 35],
      data: point.value
    },
    {
      type: 'lines',
      coordinateSystem: 'geo',
      geoIndex: 2,
      zlevel: 3,
      markLine: {
        silent: true
      },
      lineStyle: {
        type: 'dashed',
        width: 2,
        color: '#fff'
      },
      data: [
        {
          coords: [
            [106.722706, 28.87864],
            [106.96, 28.08]
          ]
        },
        {
          coords: [
            [106.96, 28.08],
            [107.11, 28.08]
          ]
        }
      ]
    },
    {
      type: 'lines',
      coordinateSystem: 'geo',
      geoIndex: 2,
      zlevel: 3,
      markLine: {
        silent: true
      },
      lineStyle: {
        width: 2,
        color: '#79c5ff',
        type: 'dashed'
      },
      data: setCoords(point.value[0].value)
    }
  )
  cqInstance.value.setOption(cqOptions)
}

function getCenterInCqMap(name: string) {
  if (!name) return []
  const result = chongqingMapJSON.features.find((feature) => {
    return feature.properties.name === name
  })
  point.value = [{ name, value: result?.properties?.centroid }]
}

const init = () => {
  // 重庆地图
  cqInstance.value = echarts.init(cqMapRef.value)
  const cqGeo: any = chongqingMapJSON
  echarts.registerMap('重庆', cqGeo)
  cqMapAddScatter()

  //todo 暂时不让地图可交互
  // cqInstance.value.on('click', function (params: { name: string; seriesType: 'map' | 'scatter' }) {
  //   if (params.seriesType === 'map') {
  //     resetHighlight(prevName.value)
  //     highlight(params.name)
  //     prevName.value = params.name
  //     cqMapAddScatter(params.name)
  //   }
  // })

  // 主城地图
  zcInstance.value = echarts.init(zcMapRef.value)
  const zcGeo: any = mainCityMapJSON
  echarts.registerMap('主城', zcGeo)
  const zcOptions = getMapOption('主城')
  zcOptions.series[0].silent = true
  zcOptions.series.push({
    type: 'lines',
    coordinateSystem: 'geo',
    geoIndex: 2,
    zlevel: 3,
    markLine: {
      silent: true
    },
    lineStyle: {
      width: 2,
      color: '#fff'
    },
    data: [
      {
        coords: [
          [106.746928, 29.810209],
          [76.746928, 29.810209]
        ]
      },
      {
        coords: [
          [106.368248, 29.624462],
          [76.746928, 29.624462]
        ]
      }
    ]
  })
  zcInstance.value.setOption(zcOptions)
}
onMounted(() => {
  init()
  state.dataList.forEach((item) => {
    highlight(item.name)
  })
})

const resetHighlight = (name?: string) => {
  const flag = mainCityAdcode.has(name)
  if (flag) {
    zcInstance.value.dispatchAction({
      type: 'downplay',
      name: name
    })
    zcInstance.value.dispatchAction({
      type: 'resetSelected'
    })
  } else {
    cqInstance.value.dispatchAction({
      type: 'downplay',
      name: name
    })
    cqInstance.value.dispatchAction({
      type: 'resetSelected'
    })
  }
}
const highlight = (name: string) => {
  const flag = mainCityAdcode.has(name)
  if (flag) {
    zcInstance.value.dispatchAction({
      type: 'highlight',
      name: name
    })
  } else {
    cqInstance.value.dispatchAction({
      type: 'highlight',
      name: name
    })
  }
}
</script>
<style scoped lang="scss">
.map-box {
  position: relative;
  width: 100%;
  height: 510px;

  .wan-sheng {
    position: absolute;
    left: 348px;
    bottom: 55px;
    z-index: 999;
  }

  .liang-jiang {
    position: absolute;
    left: 10px;
    top: 55px;
    z-index: 1;
  }

  .gao-xin {
    position: absolute;
    left: 20px;
    top: 92px;
    z-index: 1;
  }

  .area-item {
    display: inline-block;
    border-radius: 4px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    color: #e8f8ff;
    padding: 6px 6px 6px 20px;
    background-color: rgba(32, 108, 248, 0.34);

    &::before {
      content: '';
      width: 4px;
      height: 4px;
      display: inline-block;
      border-radius: 50%;
      background: #b4eafc;
      position: absolute;
      top: 12px;
      left: 10px;
    }
  }

  .info-box {
    position: absolute;
    right: 10px;
    bottom: 50px;
    background: url('@/assets/img/index/map-info-box.png') no-repeat;
    background-size: 100%;
    width: 310px;
    height: 199px;
    font-family: Microsoft YaHei;

    padding: 0 10px;
    & > .row-1 {
      line-height: 58px;
      font-weight: bold;
      font-size: 16px;
      color: #61b5fd;
      text-align: center;
    }
    .row-2,
    .row-3 {
      display: flex;
      height: 63px;
      background: rgb(18, 62, 123, 0.3);
    }

    .common-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      &:nth-child(2),
      &:nth-child(3) {
        &:before {
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          position: absolute;
          display: inline-block;
          content: '';
          width: 1px;
          height: 30px;
          background: rgb(5, 240, 255, 0.3);
        }
      }
      & > span:nth-child(1) {
        font-weight: bold;
        font-size: 20px;
        color: #fcc538;
      }
      & > span:nth-child(2) {
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
      }
    }
  }
}
#cqMap {
  width: 100%;
  height: 510px;
  position: relative;
  left: 41px;
}
#zcMap {
  position: absolute;
  top: 10px;
  left: 90px;
  width: 200px;
  height: 200px;
  z-index: 1;
}
</style>
